<!-- 我的收藏 -->
<template>
	<view class="collection-bg" :style="{'--price':vuex_config.price}">
		<!-- 循环列表 -->
		<view class="collection" v-for="(item, index) in dataList" :key="item.pk_id" @click="onClick(item)">
			<view class="collection-item flex">
				<view class="collection-left">
					<image :src="$formatImg(item.product_img)" class="collection-image  u-margin-left-30"></image>
					<!-- <view class="collection-image u-margin-left-30"></view> -->
				</view>
				<view class="collection-right u-margin-right-30 details">
					<view :class="['u-font-30 place',item.type == 5?'u-line-2':'u-line-1']" style="font-size: 30rpx;">{{ item.product_name }}</view>
					<view class="money u-font-36" v-if="item.type != 5">
						￥{{ item.price }}
						<text class="u-font-26 rise">起</text>
					</view>

				</view>

			</view>
			<!-- 收藏按钮 -->
			<view class=" collect-btn-box">
				<view class="u-font-24" style="margin-right: 10rpx;">
					{{item.date_creation}}
				</view>
				<view class="click-collection u-font-30" @click.stop="bindCollecton(index, item.type, item.fk_pro_id)">
					取消收藏</view>
			</view>
		</view>
		<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>
	</view>
</template>

<script>
	import {
		uniModal,
		uniToast
	} from '@/utils/uniPromise.js';
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				dataList: [], //收藏列表
				typeOption: {
					1: 9,
					2: 4,
					3: 3,
					4: 1
				}
			};
		},
		onLoad: function() {
			this.initPage();
		},
		onReachBottom: function() {
			this.loadMore();
		},
		methods: {
			// 取消收藏
			bindCollecton(idx, type, fk_pro_id) {
				uniModal({
					content: '是否不再关注此产品？？'
				}).then(() => {
					this.$resPost('DeleteUsersFavourite', {
						type,
						product_id: fk_pro_id
					}).then(({
						data
					}) => {
						this.dataList.splice(idx, 1);
						uniToast({
							title: '已取消收藏',
							duration: 500
						});
					});
				});
			},
			// 页面初次渲染
			initPage() {
				this._init_data('GetUsersFavouriteList', {}, {
					callBack: this.getter
				});
			},
			getter(data) {
				return data.map(item => {
					item.product_img = item.product_img ? item.product_img.split(',')[0] : ''
					return item
				})
			},
			loadMore() {
				this._load_data();
			},
			onClick(item) {
				if(item.type == 5){
					this.$linkTo(`/package/league/articleLibrary/index?id=${item.fk_pro_id}`)
				}else{
					this.goProd(item)
				}
				
			},
			goProd () {
				if (item.is_online == 0) {
					uniToast('商品已下架')
					return
				}
				// 选品池选中的
				if(item.fk_business_id != this.vuex_business.pk_id){
					if(item.fk_business_id == 1000){
						uni.navigateToMiniProgram({
							appId: 'wx779219ea3410ae6e',
							path: `/package/product/local/prod/index?id=${item.fk_pro_id}`,
							success: res => {},
							fail:(err)=>{
								console.log('错误',err)
							}
						})
					}
					return
				}
				let prodType = item.type == 4?(item.auction == 1? 14:1) : this.typeOption[item.type]
				this.$toProd({
					pk_id: item.fk_pro_id,
					prodType: prodType,
				})
			}
		}
	};
</script>
<style>
	page {
		background-color: #f5f5f5 !important;
	}
</style>
<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.collect-btn-box {
		width: 60%;
		display: flex;
		align-items: center;
		position: absolute;
		right: 20rpx;
		bottom: 26rpx;
		color: #999999;
		justify-content: space-between;
	}

	.collection {
		position: relative;
	}

	.collection-bg {
		height: 100%;
	}

	.details {
		display: flex;
		flex-direction: column;
	}

	.collection-item {
		padding: 30rpx 0;

		height: 241rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
	}

	.collection-image {
		display: flex;
		width: 230rpx;
		height: 180rpx;
		margin-right: 30rpx;
		border-radius: 10rpx;
	}

	.place {
		width: 353rpx;
		color: #333333;
		font-weight: bold;
	}

	.money {
		color: var(--price);
		margin-top: 10rpx;

		.rise {
			color: #999999;
			margin-left: 6rpx;
		}
	}

	.click-collection {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 158rpx;
		height: 58rpx;
		border: 1rpx solid #ccc;
		color: #999999;
		border-radius: 4rpx;
	}

	/deep/ .u-empty {
		height: 100vh;
	}
</style>
